<template>
	<view>
		<uni-nav-bar left-icon="arrowleft" right-text="清空" title="订单搜索" @clickLeft="back" @clickRight="remove" :fixed="true" class="top" status-bar></uni-nav-bar>
		 <form @submit="formSubmit" >
		<view class="ul qf">
			<view class="li">
				<text>姓 名</text>
				：
				<input type="text" name="names" v-model="contactUser" value="" placeholder="请输入姓名" />
			</view>
			<view class="li">
				<text>手 机 号</text>
				：
				<input type="number" maxlength="11" v-model="contactPhone" name="phone" value="" placeholder="请输入手机号" />
			</view>
			<view class="li">
				<text>订 单 号</text>
				：
				<input type="text" name="num" value="" v-model="orderSn" placeholder="请输入订单号" />
			</view>
			<view class="li">
				<text>货 号</text>
				：
				<input type="text" name="huohao" value="" v-model="productSn" placeholder="请输入货号" />
			</view>
			<view class="li">
				<text>活动</text>
				：
				<picker @change="bindPickerChangeact"  :range="actList" range-key="actName">
					<view class="uni-input" :class="{color999:statustext=='请选择活动'}">{{acttext}}</view>
				</picker>
				<uni-icons type="arrowdown" size="30rpx" color="#9b9b9b" class="uni-arrowdown" />
			</view>
			<view class="li">
				<text>状态查询</text>
				：
				<picker @change="bindPickerChange"  :range="status" range-key="desp">
					<view class="uni-input" :class="{color999:statustext=='请选择状态'}">{{statustext}}</view>
				</picker>
				<uni-icons type="arrowdown" size="30rpx" color="#9b9b9b" class="uni-arrowdown" />
			</view>
			
			
			<view class="li">
				<text>审核开始时间</text>
				：
				<picker mode="date" :value="shenhdate" start="2000-01-01" :end="endDate" @change="bindshenhDateChange">
					<view class="uni-input" v-show="shenhdate">{{ shenhdate }}</view>
					<view class="uni-placeholder" v-show="!shenhdate">请选择审核开始时间</view>
				</picker>
				<image src="/static/img/calendar.png" class="time"></image>
			</view>
			<view class="li">
				<text>审核结束时间</text>
				：
				<picker mode="date" :value="shenhedate" start="2000-01-01" :end="endDate" @change="bindshenheDateChange">
					<view class="uni-input" v-show="shenhedate">{{ shenhedate }}</view>
					<view class="uni-placeholder" v-show="!shenhedate">请选择审核结束时间</view>
				</picker>
				<image src="/static/img/calendar.png" class="time"></image>
			</view>
		</view>
		<button class="button" form-type="submit">搜 索</button>
		</form>
		
		
	</view>
</template>

<script>
import { uniNavBar, uniIcons } from '@dcloudio/uni-ui';
import order from '../../../servers/agent/order/orderfind.js';

export default {
	components: { uniNavBar, uniIcons },
	data() {
		return {
			status: [],
			statustext:'请选择状态',
			acttext:'请选择活动',
			actList:[],
			statuscode: '',
			actId:'',
			shenhdate:null,
			shenhedate:null,
			endDate: null,
			productSn:'',
			contactUser:'',
			contactPhone:'',
			orderSn:''
			
		};
	},
	mounted() {
		this.endDate = this._endDate();
		// this.open();
		this.initData();
	},
	methods: {
		initData(){
			order.findBytype(1+'').then(res => {
				if(res.code == 200){
                       this.actList=res.data;
					
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}	
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});	
				order.getSysTagList().then(res => {
					if(res.code == 200){
				           this.status=res.data;
						
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}	
					})
					.catch(err => {
						console.log(new Error('请检查网络后重试'));
					});	
			
		},
		
		// 提交
		formSubmit(e){
			var params={
				// agentId:null,
				contactUser:e.detail.value.names,
				contactPhone:e.detail.value.phone,
				orderSn:e.detail.value.num,
				auditEndTime:this.shenhedate,
				auditStartTime:this.shenhdate,
				endTime:null,
				startTime:null,
				productSn:e.detail.value.huohao,
				orderType:null,
				orderStatus:this.statuscode,
				
				agentName:null
				
			}
			if(this.shenhedate<this.shenhdate){
				uni.showToast({
					title:'审核结束时间不能小于开始时间~',
					icon:'none'
				})				
				this.shenhedate=''
				
			}
			console.log(params)
			
			uni.showLoading({
			    title: '数据加载中'
			});
			uni.navigateTo({
				url:'./orderfindlist?arr='+JSON.stringify(params)
			})
		
		},
		bindPickerChange(e) {
			this.statuscode=this.status[e.target.value].value;
			this.statustext=this.status[e.target.value].desp;
		},
		bindPickerChangeact(e) {
			this.actId=this.actList[e.target.value].id;
			this.acttext=this.actList[e.target.value].actName;
		},
		bindshenhDateChange(e){
			this.shenhdate = e.target.value;
		},
		bindshenheDateChange(e){
			this.shenhedate = e.target.value;
		},
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		remove() {		
			this.shenhdate=null,
			this.shenhedate=null,
			this.contactUser='',
			this.contactPhone='',
			this.orderSn='',
			this.productSn='',
			this.statuscode= '',		
			this.statustext='请选择状态'
			this.actId='';
			this.acttext="请选择活动"
		},
	
	
		_endDate() {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			return year + '-' + month + '-' + day;
		},
	
	}
};
</script>

<style lang="less" scoped>
.qf {
	padding: 0 20rpx;
	.li {
		position: relative;
		display: flex;
		flex-direction: row;
		line-height: 120rpx;
		text {
			font-size: 28rpx;
			width: 190rpx;
			text-align-last: justify;
		}
		.color999{
			color: #999;
		}
		input,
		picker {
			font-size: 26rpx;
			width: 557rpx;
			height: 90rpx;
			line-height: 90rpx;
			border: 1px solid #e1e1e1;
			border-radius: 10rpx;
			padding: 0 27rpx;
			box-sizing: border-box;
			margin: 15rpx 0;
			background: #ffffff;
			.uni-placeholder {
				color: #999999;
			}
		}
		.find,
		.uni-arrowdown,
		.time {
			position: absolute;
			right: 0;
			top: 15rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
		}
		.find {
			width: 121rpx;
			color: #ffffff;
			font-size: 26rpx;
			background: #bd3c8c;
			border-bottom-right-radius: 10rpx;
			border-top-right-radius: 10rpx;
		}
		.uni-arrowdown {
			width: 50rpx;
			pointer-events: none;
		}
		.time {
			top: 40rpx;
			right: 20rpx;
			width: 36rpx;
			height: 34rpx;
			pointer-events: none;
		}
	}
}
.button {
	height: 90rpx;
	line-height: 90rpx;
	margin: 30rpx 20rpx;
	text-align: center;
	color: #ffffff;
	border-radius: 50px;
	font-size: 32rpx;
	background: linear-gradient(90deg, #d2158a, #fc6395);
}

</style>
